// 更换头像的模块

// 获取img
// img.cropper({})

// 1. 插件配置
let cropper = new Cropper($('#image')[0], {
    aspectRatio: 1, // 裁剪图层的横纵比例
    preview: $('.img-preview'), // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
  })
  
  // 2. 上传按钮(input type=file 丑)=>  需要处理
  $('.select').on('click', (e) => {
    //触发input type = file的事件
    $('#file').click() // 选好了图片
  })
  
  // =>  input  "" => "abc" =>  监听 => oninput  onchange
  // =>  input (file) => 没图片 =>  有图片 =>onchange
  $('#file').on('change', (e) => {
    // console.log(e.target.files[0])
    let file = e.target.files[0]
    // url 路径=>统一资源(各种不同格式后缀的文件, .css  .js  .html  .png)定位符 =>
    let url = URL.createObjectURL(file)
    // URL是window内置的对象, createObjectURL就是把blob对象(File的父类)转成url地址(浏览器本地的-跟后台无关)
    // 3. 回显图片 =>  img#image
    cropper.replace(url) // 回显
    // console.dir(cropper)  // replace(url实参)
    // => file  =>  路径
    // => src="路径"
    // => img src = ""
    // => base64格式的字符串
  })
  // 4. 确定按钮=>  4.1 发送请求  4.2 更新页面
  
  $('.sure').on('click', (e) => {
    // 格式转换
    let canvas = cropper.getCroppedCanvas({
      // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
      width: 100,
      height: 100,
    })
    let base64Str = canvas.toDataURL('image/jpeg') // canvas图像 -> base64字符串
    // image/jpeg 是对标签输出的base64字符串做出一个类型的标记
    // 等一会儿把头像base64字符串, 
    // 放到img标签的src上, img标签根据类型就知道如何解析这串base64字符串
  
    base64Str = encodeURIComponent(base64Str)
    console.log(base64Str)
    let data = 'avatar=' + base64Str
    postAvatar(data, (res) => {
      // console.log(res)
    })
  })
  
  // 小技巧
  // 函数里面用数据img=> 来源
  // 1. 外部声明
  // 2. 形参=>
  // 2.1 默认形参
  // 2.2 自己传
  